<script lang="ts" setup>
import { NTag, NDropdown, useThemeVars } from "naive-ui";
import { useDesignStore } from "@/stores/module/design";
import { useRoute } from "vue-router";
import { useTagViewStore } from "@/stores/module/tagView";
import { computed, nextTick, ref, toRefs, watch } from "vue";
import { useI18n } from "@/hooks/useI18n";
import {
  ArrowExportRtl16Filled,
  ArrowExportLtr16Filled,
  ArrowClockwise28Filled,
  AutoFitWidth20Filled,
} from "@vicons/fluent";
import { RenderIcon } from "@/components/icon/RenderIcon";
import type { TagView } from "@/typings/tag-view";

const theme = useThemeVars();

const borderColor = computed(() => theme.value.borderColor);

const { getPrefixCls, isShowTagView } = toRefs(useDesignStore());

const prefixCls = getPrefixCls.value("tag-view");

const { t } = useI18n();

const route = useRoute();

const { addView, visitedViews, delView, closeAll, closeLeft, closeRight, refresh, toView } = toRefs(useTagViewStore());

let currentPath: string = "";

const tagView = ref<TagView>({
  path: "",
  title: "",
  name: "",
});

watch(
  () => route.fullPath,
  () => {
    currentPath = route.fullPath;
    const { fullPath, meta, name } = route;
    tagView.value = {
      path: fullPath,
      title: t(meta.translation as string),
      name: name as string,
    };
    addView.value(tagView.value);
  },
  {
    immediate: true,
  }
);

const tagType = (value: string) => {
  if (value === route.fullPath) {
    return "success";
  }
  return "default";
};

const isShowContextmenu = ref<boolean>(false);

const handleEventMap = (key: string) => {
  switch (key) {
    case "refresh":
      refresh.value(tagView.value);
      break;
    case "closeRight":
      closeRight.value(tagView.value);
      break;
    case "closeLeft":
      closeLeft.value(tagView.value);
      break;
    case "closeAll":
      closeAll.value(tagView.value);
      break;

    default:
      break;
  }
  clickOutside();
};

const options = [
  {
    label: "刷新页面",
    key: "refresh",
    icon: RenderIcon(ArrowClockwise28Filled),
  },
  {
    label: "关闭右侧",
    key: "closeRight",
    icon: RenderIcon(ArrowExportLtr16Filled),
  },
  {
    label: "关闭左侧",
    key: "closeLeft",
    icon: RenderIcon(ArrowExportRtl16Filled),
  },
  {
    label: "关闭所有",
    key: "closeAll",
    icon: RenderIcon(AutoFitWidth20Filled),
  },
];

const x = ref(0);
const y = ref(0);

const contextMenu = async (e: MouseEvent) => {
  e.preventDefault();

  await nextTick();
  isShowContextmenu.value = true;

  x.value = e.clientX;
  y.value = e.clientY;
};

const clickOutside = () => {
  isShowContextmenu.value = false;
};

const handleSelect = (key: string) => {
  handleEventMap(key);
};
</script>

<template>
  <div :class="prefixCls" v-if="isShowTagView">
    <NTag
      class="cursor-pointer"
      closable
      v-for="item in visitedViews"
      :type="tagType(item.path)"
      @close="delView(item, currentPath)"
      @contextmenu="contextMenu"
      @click="toView(item, currentPath)"
    >
      {{ t(item.title) }}
    </NTag>
    <NDropdown
      placement="bottom-start"
      trigger="manual"
      :show="isShowContextmenu"
      :options="options"
      :x="x"
      :y="y"
      :on-clickoutside="clickOutside"
      @select="handleSelect"
    />
  </div>
</template>

<style lang="less" scoped>
@prefix-cls:~ "@{namespace}-tag-view";
.@{prefix-cls} {
  border-bottom: 1px solid v-bind(borderColor);
  @apply flex gap-2 px-2 py-1;
}
</style>
